import React from 'react';
import {NavLink, Link} from 'react-router-dom';

var $ = (function(){
  var ajax=function(url,callback){
       var xhr=new XMLHttpRequest();
       xhr.open("POST",url,true);
       xhr.send("");
       xhr.onreadystatechange=function(){
         if(xhr.readyState==4&&xhr.status==200){
               callback(JSON.parse(xhr.responseText));
         }
       }
  }
  return {
    http:ajax    
   }

})();

export default class News extends React.Component{  
              constructor(props) {
                super(props);                
            this.state={
              id:{
                id:0
              },
                data:{
                    data:[[{1:''}]]
                }
            }
            }
            target(e){
              console.log(e.target.getAttribute('id'));
              this.setState({
                id:Object.assign({},this.state.id,
                {id:e.target.getAttribute('id')}
                )
            })
            this.componentWillMount();
          }
            componentWillMount(){
            var _this=this;
            var a=null;
            var arr=[];
            console.log(this.state.id);
            $.http(`http://10.31.153.45:3000/News/info/${this.state.id.id}`,function(data){
              //console.log(data.docs[0].global)
                    arr.push(data.docs)
                    console.log(data.docs);
                    _this.setState({
                        data: Object.assign({}, _this.state.data, {data:arr}),
                    })   
            });
            }

    render(){
      let list = [];
    //  console.log(this.state.data.data[0][0].global);
      //console.log(this.state.data.data[0]);
    const {news} = this.state.data.data[0];
    const newsList = this.state.data.data[0].length;
   
    for(var i=0;i<newsList;i++){
      const newsType= this.state.data.data[0][i].type;
      
      var a=this.state.data.data[0][i];
      var link='/detail/'+a._id;
      list.push(
        <ul>
           <li>
                <NavLink to={link}>{this.state.data.data[0][i].global}</NavLink>
           </li>
      </ul>
    )
    }

        return(
          <div>   
            <div style={{display:'inline-block'}}  className='col-md-8'>
             <div>              
                <ul id="myTab" className="nav nav-tabs " onClick={this.target.bind(this)}>
                      <li className="active"><a href="#home" data-toggle="tab" id='0' >
                热门新闻</a></li>
                      <li ><a href="#ios" data-toggle="tab" id='1' >国际新闻</a></li>
                      <li className="dropdown" >
                        <a href="#" id="myTabDrop1" className="dropdown-toggle" 
                          data-toggle="dropdown" id='2'>
                          国内新闻 <b className="caret"></b></a>
                        <ul className="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                          <li><a href="#jmeter" tabIndex="-1" data-toggle="tab">娱乐新闻</a></li>
                          <li><a href="#ejb" tabIndex="-1" data-toggle="tab">体育新闻</a></li>
                        </ul>
                      </li>
                 </ul>
              </div>
           
                      <div id="myTabContent" className="tab-content" style={{height:'300px'}}>
                          <div className="tab-pane fade in active" id="home" type={1}>
                            {list}
                           
                          </div>
                          <div className="tab-pane fade" id="ios" type={2}>
                          {list}
                          </div>
                          <div className="tab-pane fade" id="jmeter" type={3}>
                          {list}
                          </div>
                          <div className="tab-pane fade" id="ejb" type={4}>
                          {list}
                            
                          </div>
                      </div>
                      <div>
                          <ul class="pagination">
                            <li><a href="#">&laquo;</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                          </ul>
                      </div>
             </div>
          <div className='col-md-4'>
                <div class="col-lg-10 col-md-4" >
                  <div class="input-group">
                    <input type="text" class="form-control"/>
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button">
                        搜索
                      </button>
                    </span>
                  </div>
                </div>

                <div className="panel panel-default col-md-4 col-lg-10" style={{marginTop:'10px',height:'200px',overflow:'hidden'}}>                  
                    <div className="panel-body">
                    {list}
                    
                    </div>
                  </div>
              </div>
        </div>
        )
    }
  
};

